<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>嘻嘻春节快乐哦</title>
		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="index.css"/>
		<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-width:720px)" />
	</head>
	<body>
		<audio id="yy" controls="false" autoplay="true" loop="loop" style="display: none;">
			<source src="https://sharefs.ali.kugou.com/202212311904/ab672605f31e7ee0cc02d9c86538ee5d/v2/2509e98c01b248633d3012d4a49a79d3/G220/M07/08/01/fIcBAF9E7L2AZw89AEkHrlEHyNA919.mp3" type="audio/mpeg" />
		</audio>
		<audio id="ty" controls="false" autoplay="true" loop="loop" style="display: none;">
			<source src="Music/ty.mp3" type="audio/mpeg" />
		</audio>
		<!-- 加载 -->
		<div class="bj">
			<div class="bj-imgs">
				<img onclick="screen()" class="Love" src="img/love.png" >
			</div>
		</div>
		<!-- 加载结束 -->
		
		
		<!-- 内容 -->
		<div class="centent">
			<div class="centent-warp">
				<div class="dc">
					<div class="centent-top">
						<div class="top-warp">
							<video style="object-fit: cover;" id="video" class="video" autoplay="" loop="" muted="muted" style="background-image:url(>)">
									<source src="img/ship2.mp4" type="video/mp4">
							</video>
						</div>
					</div>
					<div class="centent-center" id="text"></div>
					<div onclick="getClass()" class="centent-bottom">点我</div>
				</div>
			</div>
		</div>
		<!-- 内容结束 -->
		
		
		<!-- 烟花 -->
		<div id="container">
		    <div id="fireworks"><img src="img/fireworks.png" alt=""></div>
		    <div id="firecracker"><img src="img/firecracker.png" alt="" width="8px"></div>
			<p class="zi">兔年快乐！注意转发给.......</p>
			<p class="zi2">哈哈哈这回没有转发，小邵同学兔年快乐哟~  </p>
		</div>
		<!-- 烟花结束 -->
	</body>
	<script type="text/javascript">
		let = document.getElementById("yy");
		let = document.getElementById("ty");
		ty.pause();
		video.pause();
		$(function() {
			$(".Love").toggleClass("active");
		})
		
		function screen () {
			$('.bj').delay(100).fadeOut('slow');
			yy.pause();
			ty.play();
			video.play();
			$(".centent .centent-warp .dc").css({
				opacity:"1",
				transform:"scale(1)",
			})
			let divTyping = document.getElementById('text');
			let i = 0,
				timer = 0,
				str = '新的一年 愿日子如熹光 温柔安详 欣喜也在望 爱的人 喜乐如常 盼的事 都归于心上！'
			
			function typing() {
				if (i <= str.length) {
					divTyping.innerHTML = str.slice(0, i++) + '_'
					timer = setTimeout(typing, 180)
				} else {
					divTyping.innerHTML = str //结束打字,移除 _ 光标
					clearTimeout(timer)
				}
			}
			typing()
		}
		
		function getClass () {
			$(".centent .centent-top").css({
				opacity:"0",
				top:"-500px",
			})
			$(".centent .centent-center").css({
				opacity:"0",
			})
			$(".centent .centent-bottom").css({
				opacity:"0",
				top:"500px",
			})
			$('.centent').delay(100).fadeOut('slow');
			$("#firecracker").css({
				transform: "scale(0)",
				bottom: "60%",
			})
			setTimeout(function() {
				$("#fireworks").css({
					transform: "scale(1)",
					opacity:"1",
				})
				setTimeout(function() {
					$("#fireworks").css({
						opacity:"0",
					})
				},1500)
				$("#container .zi").css({
					left:"200%",
					zIndex: "3",
				})
				setTimeout(function() {
					$("#container .zi2").css({
						left:"200%",
						zIndex: "3",
					})
				},2000)
			},2000)
		}
	</script>
</html>